<script lang="ts" setup>
import { formatNumber } from '@/home/utils/format';
import Tag from '@/home/components/Tag.vue';
import { gotoUrl } from '@/home/utils/other';
import { getShortDate } from '@/home/utils/date';

const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
});

const atomgitUrl = import.meta.env.VITE_ATOMGIT_URL;
</script>

<template>
  <RouterLink :to="`/explore/journalism/detail/${props.data?.informationId}`" custom v-slot="{ href }">
    <div class="page-home-recommend-article group cursor-pointer border-b-1 border-hex-e3e3e3 border-solid bg-hex-fff p-16 hover:bg-hex-fafafa" @click="gotoUrl(href)">
      <div class="flex-y-center flex-wrap gap-x-4 text-12 text-[#adadad] leading-20">
        <template v-if="props.data.authorInfo">
          <a :href="`${atomgitUrl}/${props.data.authorInfo.username}`" target="_blank" class="flex-y-center gap-x-4" @click.stop>
            <img
              :data-src="props.data.authorInfo.photo"
              :alt="props.data.authorInfo.nickname"
              class="lozad block size-20 border border-#e8e8e8 rounded-50% border-solid"
              v-if="props.data.authorInfo.photo"
            >
            <div class="text-#292929">{{ props.data.authorInfo.nickname }}</div>
          </a>
          <div>·</div>
        </template>

        <div>{{ getShortDate(props.data.publishTime) }}</div>

        <template v-if="props.data.isSelected == 1">
          <div>|</div>
          <div class="text-#292929 font-medium">{{ $t('home.common.prime') }}</div>
        </template>

        <div>|</div>
        <div>{{ $t('home.content.title5') }}</div>

        <template v-for="(labelValue, labelIndex) in props.data.labelNameList" :key="labelValue.labelId">
          <div v-if="labelIndex === 0">|</div>
          <div v-else>·</div>
          <Tag
            :id="labelValue.labelId"
            :name="labelValue.labelName"
            :hashtag="false"
            class="hover:(text-#292929)"
            blank
          />
        </template>
      </div>

      <div class="mt-4 flex justify-between gap-x-8">
        <div class="flex-grow">
          <RouterLink class="block" :to="`/explore/journalism/detail/${props.data?.informationId}`" target="_blank">
            <h3 class="line-clamp-1 break-anywhere text-16 color-hex-292929 font-500 leading-24 group-hover:(underline)" :title="props.data.informationTitle">
              {{ props.data.informationTitle }}
            </h3>
          </RouterLink>
          <p class="line-clamp-1 mt-4 break-anywhere text-justify text-14px color-hex-575757 font-400 leading-22">{{ props.data.informationMsg }}</p>
          <div class="mt-8 flex-y-center gap-24">
            <div class="flex-y-center gap-4 text-12 text-hex-575757 font-400">
              <span class="i-icons:eye-outlined size-16"></span>
              <span class="leading-16">{{ formatNumber(props.data.informationViews) }}</span>
            </div>

            <div class="flex-y-center gap-4 text-12 text-hex-575757 font-400">
              <span class="i-icons:good size-16"></span>
              <span class="leading-16">{{ formatNumber(props.data.informationLikeNum) }}</span>
            </div>

            <div class="flex-y-center gap-4 text-12 text-hex-575757 font-400">
              <span class="i-icons:favorite size-16"></span>
              <span class="leading-16">{{ formatNumber(props.data.informationCollectNum) }}</span>
            </div>
          </div>
        </div>

        <div class="h-78 w-134 flex-shrink-0">
          <img :data-src="props.data.informationUrl" :alt="props.data.informationTitle" class="lozad size-full rounded-4 bg-hex-f7f7f7 object-contain">
        </div>
      </div>
    </div>
  </RouterLink>
</template>

<style lang="scss" scoped>
</style>
